How do you handle model validation errors in an AJAX form submission without reloading the page?

Question

Termo Infinito · Answer

O Termo Infinito é um verdadeiro desafio mental com palavras, ótimo para quem busca atividades que combinem entretenimento e estímulo cognitivo.

ICSM Computer · Answer

Handling model validation errors in an AJAX form in ASP.NET MVC:
1. View (Main Form)
Use Ajax.BeginForm with UpdateTargetId:
andlt;div id="formContainer"andgt;
    @Html.Partial("_FormPartial", Model)
andlt;/divandgt;
2. Partial View: _FormPartial.cshtml
@model MyViewModel
@using (Ajax.BeginForm("SubmitForm", "Home", new AjaxOptions {
    UpdateTargetId = "formContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "POST"
}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @Html.TextBoxFor(m =andgt; m.Name)
    @Html.ValidationMessageFor(m =andgt; m.Name)
    andlt;input type="submit" value="Submit" /andgt;
}
3. Controller
[HttpPost]
public ActionResult SubmitForm(MyViewModel model)
{
    if (!ModelState.IsValid)
        return PartialView("_FormPartial", model); // return form with errors
    return PartialView("_SuccessPartial", model);  // return success view
}
4. Scripts
Make sure these are included:
andlt;script src="jquery.js"andgt;andlt;/scriptandgt;
andlt;script src="jquery.validate.js"andgt;andlt;/scriptandgt;
andlt;script src="jquery.validate.unobtrusive.js"andgt;andlt;/scriptandgt;
andlt;script src="jquery.unobtrusive-ajax.js"andgt;andlt;/scriptandgt;
5. Re-enable Validation After AJAX
$(document).ajaxComplete(function () {
    $.validator.unobtrusive.parse("#formContainer");
});

forum

How do you handle model validation errors in an AJAX form submission without reloading the page?

Anubhav Kumar

Can you answer this question?

2 Answers

1. View (Main Form)

2. Partial View: _FormPartial.cshtml

3. Controller

4. Scripts

5. Re-enable Validation After AJAX

Liked By